<template>
	<view class="content">
		<!-- tabbar -->
		<view class="tabbar">
			<view :class="index == 0 ? 'active' : ''" @click="setSwiper(0)">待处理</view>
			<view :class="index == 1 ? 'active' : ''" @click="setSwiper(1)">已完成</view>
			<view :class="index == 2 ? 'active' : ''" @click="setSwiper(2)">已取消</view>
		</view>
		<view class="uni-margin-wrap">
			<!-- <swiper class="swiper" :current="index" @change="swiperChnage">
				<swiper-item v-for="(swiper,index) in 3" :key="index">
					<scroll-view scroll-y="true" class="scroll" @scrolltolower="daichuli"> -->
						<view class="daichuli" v-for="(item,index) in auntList" :key="item.id">
							<view class="info">
								<view class="title">
									<view>{{item.room_name}}</view>
									<view>
										<view :class="item.status == 0 ? 'red' : item.status == 1 ? 'green' : 'huis'">
										</view>
										<view :class="item.status == 0 ? 'hong' : item.status == 1 ? 'lv' : 'hui'">
											{{item.status_str}}</view>
									</view>
								</view>
								<view class="time">预计打扫时间：{{item.clean_time}}</view>
							</view>
							<view class="btn" v-if="item.status == 0" @click="sureClaerRoom(item.id,item.room_name)">确认打扫</view>
						</view>
					<!-- </scroll-view>
				</swiper-item>
			</swiper> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				duration: 800,
				index: 0,
				pages: 1,
				auntList: [],
				last_page: null
			}
		},
		onLoad() {
			// 管理员身份
			this.getAuntChargelists();
		},
		onReachBottom() {
			if (this.pages < this.last_page) {
				this.pages += 1;
				this.getAuntChargelists();
			}
		},
		onShow() {},
		methods: {
			getAuntChargelists() {
				this.https('/order/auntChargelists', {
					page: this.pages,
					mobile: uni.getStorageSync('userinfo').mobile,
					status: this.index
				}).then(res => {
					if (this.pages == 1) {
						this.auntList = res.data.data;
					} else {
						this.auntList = this.auntList.concat(res.data.data);
					}
					this.last_page = res.data.last_page;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})

			},
			// 确认打扫
			sureClaerRoom(id, name) {
				uni.showModal({
					content: `确认${name}房间已打扫过了吗？`,
					success: (res) => {
						if(res.confirm){
							this.https('/order/editStatus', {
								id: id,
								aunt_mobile: uni.getStorageSync('userinfo').mobile,
							}).then(res => {
								this.getAuntChargelists();
							}).catch(err => {
								uni.showToast({
									title: err.msg,
									icon: 'none'
								})
							})
						}
					}
				})

			},
			swiperChnage(e) {
				setTimeout(() => {
					this.pages = 1;
					this.index = e.mp.detail.current
					this.auntList = [];
					this.getAuntChargelists();
				}, 200)
			},
			setSwiper(e) {
				this.index = e;
				this.pages = 1;
				this.auntList = [];
				this.getAuntChargelists();
			},
			// 待处理
			daichuli(e) {
				if (this.pages < this.last_page) {
					this.pages += 1;
					this.getAuntChargelists();
				}
			},
			yiwanchneg(e) {},
			yixuxiao(e) {},
		}
	}
</script>

<style lang="scss">
	.swiper-slide {
		height: auto
	}

	.hong {
		color: #DD4949;
	}

	.hui {
		color: #6A6A6C;
	}

	.lv {
		color: #00C853;
	}

	.swiper {
		height: 92vh;
	}

	.scroll {
		height: 100%;
	}

	.tabbar {
		display: flex;
		align-items: center;
		background-color: #F1F3F6;
		width: 670rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 auto;
		justify-content: space-around;
		margin-bottom: 15rpx;
		margin-top: 10rpx;
		color: #666666;
		font-size: 32rpx;
	}

	.active {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		color: #00809F;
	}

	.active::after {
		content: '';
		width: 34rpx;
		height: 7rpx;
		background-color: #00809F;
		display: block;
		margin-left: 30rpx;
		border-radius: 5rpx;
	}

	.daichuli {
		width: 640rpx;
		height: 208rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(189, 189, 189, 0.5);
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 20rpx 15rpx;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}

	.daichuli:last-child::after {
		content: '';
		height: 70rpx;
		display: block;
		width: 100%;
	}

	.info {
		height: 144rpx;
		border-bottom: 2rpx solid #DADDE1;
	}

	.time {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.title {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #DD4949;

		view:nth-child(1) {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #333333;
		}

		.red {
			width: 10rpx;
			height: 10rpx;
			background: #DD4949;
			margin-right: 10rpx;
			border-radius: 50rpx;
		}

		.huis {
			width: 10rpx;
			height: 10rpx;
			background: #6A6A6C;
			margin-right: 10rpx;
			border-radius: 50rpx;
		}

		.green {
			width: 10rpx;
			height: 10rpx;
			background: #00C853;
			margin-right: 10rpx;
			border-radius: 50rpx;
		}

		view:nth-child(2) {
			display: flex;
			align-items: center;


		}
	}

	.btn {
		width: 132rpx;
		height: 48rpx;
		background: #00809F;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		line-height: 48rpx;
		margin-left: 506rpx;
		margin-top: 16rpx;
	}
</style>
